<template>
  <!-- 
  <img src="../assets/img/swiper.jpg" alt />-->
  <div class="chongzhi">
    <indextop />
    <div class="gouwuche">
      <div class="gouwuchetop">
        <img src="../assets/img/footlogo.jpg" alt="logo" />
        <span></span>
        <div>充值支付</div>
      </div>
      <paystyle v-if="chongis" :zongjia="this.$store.state.zongjia" @zhifuchenggong="chongis=false"/>
      <zhifuchenggong  v-else />
    </div>
    <indexfoot />
  </div>
</template>

<script>
// @ is an alias to /src
import indextop from "@/components/indextop.vue";
import indexfoot from "@/components/indexfoot.vue";
import zhifuchenggong from "@/components/zhifuchenggong.vue";
import paystyle from "@/components/paystyle.vue";
import "@/assets/font/iconfont.css";
export default {
  data() {
    return {chongis:true};
  },
  name: "index",
  components: {
    indextop,
    indexfoot,
    paystyle,
    zhifuchenggong
  },
  mounted() {
    window.console.log(this.$store.state.zongjia)
  }
};
</script>
<style scoped>
.gouwuche {
  width: 80%;
  margin: 0px auto;
}

.gouwuchetop {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem 0px;
  font-size: 1.2rem;
  border-bottom: 1px solid #ccc;
  margin-bottom: 1.5rem;
}
.gouwuchetop img {
  width: 30%;
}
.gouwuchetop span {
  margin: 0px 3rem;
  width: 1px;
  background-color: #ccc;
  height: 2rem;
}
</style>